<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <base th:href="@{/}">
    <title>马思特奥赛培训学校网络管理系统</title>

    <link rel="stylesheet" th:href="@{/asserts/css/signin.css}"/>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/css/element-ui.css}">


    <style>
        body {
            background-color: #d2ddde;
        }
    </style>
    <style type="text/css">
        .help-block {
            color: red;
        }

    </style>
</head>

<body>


<div class="loginbox">

    <div class="container">
        <form class="form-signin text-center" action="" id="from">
            <img class="mb-4" th:src="@{/asserts/img/tupian.jpg}" alt="" width="180" height="180"/>
            <h1 class="h2 mb-3 font-weight-normal">马思特奥赛培训学校</h1>
            <h3 class="h5 mb-3 font-weight-normal">网络管理系统</h3>
            <label class="sr-only">Username</label>
            <input type="text" class="form-control" placeholder="用户名"
                   id="username"
                   name="name"/>
            <label class="sr-only">Password</label>
            <input type="password" class="form-control" placeholder="密码"
                   id="password"
                   name="pwd"
                   style="margin-top: 20px"/>

            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="but btn btn-default" value="admin">管理员</button>
                <button type="button" class="but btn btn-default" value="teacher">教　师</button>
            </div>
            <div class="checkbox mb-3">
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="button" id="sub" @click="login">登录</button>
            <span class="help-block"></span>
            <p class="mt-7 mb-3 text-muted">@马思特奥赛培训学校网络管理系统</p>
            <p class="mt-5 mb-3 text-muted">制作者：Deng JunHao</p>
        </form>
    </div>
</div>
</body>
<script type="text/javascript" th:src="@{/webjars/jquery/1.9.1/jquery.js}"></script>
<script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/Vue.js}"></script>
<script type="text/javascript" th:src="@{/js/element-ui.js}"></script>
<script th:inline="javascript" type="text/javascript">

    var basePath = /*[[${#httpServletRequest.getContextPath()}]]*/'ContextPath';

    var a = new Vue({
        el: "#from",
        data: {
            usertype: 0,
            url: basePath + "/login"
        },
        methods: {
            login: function () {
                if (a.usertype == 0) {
                    a.point1()
                    return;
                }
                if (a.usertype == "sadmin") {
                    // superadmni
                    console.log("superadmin");
                }
                if (a.usertype == "admin") {
                    // admin
                    console.log("admin");
                    $.ajax({
                        url: this.url,
                        type: "post",
                        async: false,
                        data: $("#from").serializeArray(),
                        contentType: 'application/x-www-form-urlencoded',
                        dataType: "json",
                        success: function (result) {
                            console.log("result:", result);
                            if (result.code == 300) {
                                alert(result.msg)
                            } else if (result.code == 100) {
                                window.location.href = basePath + "/admin/index";
                            }
                        }, error: function (data) {
                            console.log("error:", data);
                        }
                    });
                }
                if (a.usertype == "teacher") {
                    console.log("teacher");
                    $.ajax({
                        url: basePath + "/teacher/login",
                        type: "get",
                        async: false,
                        data: $("#from").serializeArray(),
                        contentType: 'application/x-www-form-urlencoded',
                        dataType: "json",
                        success: function (result) {
                            if (result.extend.info == 300) {
                                a.point2()
                            } else if (result.extend.info == 200) {
                                window.location.href = basePath + "/teacher/index";
                            } else
                                a.point3()
                        }
                    });
                }

            },

            point1() {
                this.$notify.info({
                    title: '提示',
                    message: '请选择用户类型'
                });
            },
            point2() {
                this.$notify.info({
                    title: '提示',
                    message: '账号不存在'
                });
            },
            point3() {
                this.$notify.error({
                    title: '提示',
                    message: '密码错误'
                });
            }

        }
    });

    $(".but").click(function () {
        $(".but").removeClass("active");
        $(this).addClass("active");
        a.usertype = $(this).val();
    });


</script>


</html>